import { CloseOutlined } from '@ant-design/icons' // 导入 Ant Design 的关闭图标
import CopyIcon from '@renderer/components/Icons/CopyIcon' // 导入自定义的复制图标组件
import { Typography } from 'antd' // 导入 Ant Design 的排版组件
import { FC } from 'react' // 导入 React 的函数组件类型
import styled from 'styled-components' // 导入 styled-components 用于样式化组件

// 定义 ClipboardPreview 组件的 Props 接口
interface ClipboardPreviewProps {
  referenceText: string // 剪贴板中的文本内容
  clearClipboard: () => void // 清除剪贴板内容的回调函数
  t: (key: string) => string // 国际化翻译函数
}

const { Paragraph } = Typography // 解构出 Typography 的 Paragraph 组件

// 定义 ClipboardPreview 函数式组件
const ClipboardPreview: FC<ClipboardPreviewProps> = ({ referenceText, clearClipboard, t }) => {
  // 如果没有 referenceText (剪贴板内容)，则不渲染任何东西
  if (!referenceText) return null

  return (
    // 容器组件
    <Container>
      {/* 剪贴板内容区域 */}
      <ClipboardContent>
        {/* 复制图标，点击时可能触发复制操作，flexShrink: 0 防止图标被压缩，cursor: pointer 鼠标悬停时显示手型 */}
        <CopyIcon style={{ fontSize: '14px', flexShrink: 0, cursor: 'pointer' }} className="nodrag" />
        {/* 文本段落，显示剪贴板内容，ellipsis={{ rows: 2 }} 表示最多显示两行，超出部分用省略号表示 */}
        <Paragraph
          ellipsis={{ rows: 2 }}
          style={{ margin: '0 12px', fontSize: 12, flex: 1, minWidth: 0 }}
          className="nodrag">
          {/* 显示 referenceText，如果 referenceText 不存在则显示 'miniwindow.clipboard.empty' 的翻译 */}
          {referenceText || t('miniwindow.clipboard.empty')}
        </Paragraph>
        {/* 关闭按钮，点击时调用 clearClipboard 函数清除剪贴板内容 */}
        <CloseButton onClick={clearClipboard} className="nodrag">
          {/* 关闭图标 */}
          <CloseOutlined style={{ fontSize: '14px' }} />
        </CloseButton>
      </ClipboardContent>
    </Container>
  )
}

// 使用 styled-components 定义 Container 样式
const Container = styled.div`
  padding: 12px; /* 内边距 */
  background-color: var(--color-background-opacity); /* 背景颜色，使用 CSS 变量 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 10px; /* 底部外边距 */
`
// 使用 styled-components 定义 ClipboardContent 样式
const ClipboardContent = styled.div`
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  width: 100%; /* 宽度占满父容器 */
  color: var(--color-text-secondary); /* 文本颜色，使用 CSS 变量 */
`

// 使用 styled-components 定义 CloseButton 样式
const CloseButton = styled.button`
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  color: var(--color-text-secondary); /* 文本颜色，使用 CSS 变量 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  padding: 4px; /* 内边距 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  flex-shrink: 0; /* 防止按钮被压缩 */

  &:hover {
    /* 鼠标悬停时的样式 */
    color: var(--color-text); /* 文本颜色变深 */
  }
`

export default ClipboardPreview // 导出 ClipboardPreview 组件
